<template>
  <div class="address" v-for="(item, index) in resData" :key="item.id">
    <div class="steps" :style="item.title ? '' : 'display:none'">{{ item.title }}</div>
    <!-- <div class="onetips" :style="item.tips ? '' : 'display:none'">{{ item.tips }}</div> -->
    <div class="image_list">
      <div class="image_list_item">
        <div class="title">
          <div class="icon"></div>
          <div
            >({{ index + 1 }}) {{ item.text }} <span style="color: #2290ff">{{ item.text2 }}</span
            ><el-button type="text" v-if="item.showbtn" @click="down(item.text2)" class="copy">复制</el-button></div
          >
        </div>

        <div class="img" v-if="!item.isShowImg">
          <img src="@/assets/channelConfig/1-1.png" alt="" v-show="item.id === 1" />
          <img src="@/assets/channelConfig/1-2.png" alt="" v-show="item.id === 2" />
          <img src="@/assets/channelConfig/1-3.png" alt="" v-show="item.id === 3" />
          <img src="@/assets/channelConfig/1-4(1).png" alt="" v-show="item.id === 4" />
          <img src="@/assets/channelConfig/2-1.png" alt="" v-show="item.id === 5" />
          <img src="@/assets/channelConfig/2-2.png" alt="" v-show="item.id === 6" />
          <img src="@/assets/channelConfig/3-1.png" alt="" v-show="item.id === 7" />
          <img src="@/assets/channelConfig/3-2.png" alt="" v-show="item.id === 8" />
        </div>
        <div class="img top" v-if="item.isTwoImg">
          <img src="@/assets/channelConfig/1-4(2).png" alt="" v-show="item.id === 4" />
        </div>
      </div>
    </div>
  </div>
  <div class="all_btn">
    <el-button class="btn" @click="next" v-show="active !== 2">已配置，下一步</el-button>
    <el-button class="btn" @click="accomplish" v-show="active === 2">完成配置</el-button>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, reactive, ref, watch } from 'vue'
  import useClipboard from 'vue-clipboard3'
  import { ElMessage } from 'element-plus'
  const { toClipboard } = useClipboard()
  import router from '@/router'
  const emit = defineEmits(['changeActive'])
  const props = withDefaults(
    defineProps<{
      resData: any
      active: any
    }>(),
    {
      resData: [{}],
      active: 0
    }
  )
  const down = async (val: any) => {
    try {
      await toClipboard(val)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  const next = () => {
    emit('changeActive')
  }
  const accomplish = () => {
    router.push({path:"/channelconfig/qywechat/messagesave"})
  }
</script>

<style lang="scss" scopedF>
  .address {
    .steps {
      font-size: 16px;
      padding-bottom: 20px;
      border-bottom: 1px solid #d9d9d9;
    }
    .onetips {
      padding-left: 16px;
      border-left: 4px solid #ff6b00;
      margin: 20px 0;
    }
    .image_list {
      &_item {
        .title {
          // width: 700px;
          // height: 36px;
          font-size: 14px;
          display: flex;
          align-items: center;
          background-color: #fffaf9;
          padding: 10px 15px;
          box-sizing: border-box;
          margin: 16px 0;
          .copy {
            margin-left: 18px;
          }
          .icon {
            width: 5px;
            height: 5px;
            margin-right: 15px;
            border-radius: 50%;
            background-color: #ff6b00;
          }
          .text {
            color: #2290ff;
          }
        }
        :deep .el-result {
          width: 10px;
          height: 10px;
        }
        :deep .el-result__icon {
          width: 100%;
          height: 100%;
        }

        .img {
          // width: 700px;
          img {
            width: 100%;
          }
        }
        .top {
          margin-top: 20px;
        }
      }
    }
  }
  .all_btn {
    margin: 10px 0 0 36%;
    display: flex;
    justify-content: flex-end;

    .btn {
      color: #fff;
      background: #ff6b00;
    }
  }
</style>
